<template>
  <el-input
    v-model="keyWord"
    class="money-input"
    :clearable="clearable"
    :disabled="disabled"
    :readonly="readonly"
    @blur="onHanleBlur"
    @change="onHandleChange"
    @clear="onHandleClear"
    @focus="onHanleFous"
    @input="valiateKey"
  />
</template>

<script>
  import { formatMoneyThoud } from '@/utils/money'

  export default defineComponent({
    name: 'CommonMoneyInput',
    props: {
      modelValue: {
        type: [Number, String],
        default: 0,
      },
      clearable: {
        type: Boolean,
        default: true,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      readonly: {
        type: Boolean,
        default: false,
      },
    },
    emits: {
      'update:model-value': null,
      'handle-input': null,
      'handle-change': null,
      'handle-focus': null,
      'handle-blur': null,
    },

    setup(props, { emit }) {
      const tempKey = ref(props.modelValue)
      const valueTypes = {
        num: 'number',
        str: 'string',
      }
      let valueType = valueTypes.num

      const getValueType = () => {
        const value = props.modelValue ?? 0
        if (typeof value === valueTypes.str) {
          valueType = valueTypes.str
        }
      }

      getValueType()

      const keyWord = ref(formatKey(props.modelValue))

      /**
       * 格式化金额
       * @param {} number
       */
      function formatKey(number) {
        let key = (number * 1).toFixed(2)
        key = formatMoneyThoud(key)
        //
        return key
      }

      /**
       * 鼠标放开事件
       */
      const onHanleBlur = () => {
        tempKey.value = keyWord.value
        keyWord.value = formatKey(keyWord.value)
        let value = tempKey.value
        if (valueType === valueTypes.num) {
          value = tempKey.value * 1
        }
        emit('update:model-value', value)
        emit('handle-blur', value)
      }

      /**
       * 千分符数字写回单纯数字
       */
      const valiateKey = () => {
        keyWord.value = keyWord.value.replace(/[^-\d.]/g, '')
        keyWord.value = keyWord.value.replace(
          /^(-)*(\d+)\.(\d\d).*$/,
          '$1$2.$3'
        )
        emit('handle-input', keyWord.value)
      }

      /**
       * 鼠标聚焦事件
       */
      const onHanleFous = () => {
        keyWord.value = tempKey.value
        emit('handle-focus', keyWord.value)
      }

      /**
       * 数字改变事件抛出
       */
      const onHandleChange = () => {
        emit('handle-change', keyWord.value)
      }

      const onHandleClear = () => {
        emit('update:model-value', keyWord.value)
      }

      watch(
        () => props.modelValue,
        (newVal) => {
          if (newVal != keyWord.value) {
            tempKey.value = newVal
            keyWord.value = formatKey(newVal)

            emit('handle-blur', newVal)
          }
        }
      )

      return {
        keyWord,
        onHanleBlur,
        onHandleChange,
        onHanleFous,
        valiateKey,
        onHandleClear,
      }
    },
  })
</script>

<style scoped lang="scss">
  .money-input {
    :deep() {
      input {
        text-align: right;
        &::placeholder {
          text-align: left;
        }
      }
    }
  }
</style>
